<template>
  <v-dialog
    v-model="dialogFormVisible"
    :close-on-click-modal="false"
    max-width="500px"
    @click:outside="close"
  >
    <v-card>
      <v-card-title>修改密码</v-card-title>
      <v-card-text>
        <v-form
          ref="form"
          v-model="valid"
          @submit.prevent="submit"
        >
          <v-text-field
            v-model.trim="form.password"
            label="新密码"
            :rules="rules.password"
            type="password"
            placeholder="请输入新密码"
            variant="outlined"
            density="compact"
            :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append-inner="showPassword = !showPassword"
          ></v-text-field>

          <v-text-field
            v-model.trim="form.confirmPassword"
            label="确认密码"
            :rules="rules.confirmPassword"
            type="password"
            placeholder="请再次输入新密码"
            variant="outlined"
            density="compact"
            :append-inner-icon="showConfirmPassword ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append-inner="showConfirmPassword = !showConfirmPassword"
          ></v-text-field>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          color="grey-darken-1"
          variant="text"
          @click="close"
        >
          取消
        </v-btn>
        <v-btn
          color="primary"
          @click="submit"
        >
          确定
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { doUpdatePassword } from "@/api/system/user/userManagement";

export default {
  name: "UserManagementPassword",
  data() {
    return {
      valid: false,
      showPassword: false,
      showConfirmPassword: false,
      dialogFormVisible: false,
      form: {
        id: null,
        password: "",
        confirmPassword: "",
      },
      rules: {
        password: [
          v => !!v || '请输入新密码',
          v => (v && v.length >= 6 && v.length <= 20) || '长度在 6 到 20 个字符'
        ],
        confirmPassword: [
          v => !!v || '请再次输入新密码',
          v => v === this.form.password || '两次输入密码不一致!'
        ],
      },
    };
  },
  methods: {
    showUpdatePassword(row) {
      this.form.id = row.id;
      this.dialogFormVisible = true;
    },
    close() {
      this.$refs.form?.reset();
      this.dialogFormVisible = false;
    },
    async submit() {
      const { valid } = await this.$refs.form.validate();
      if (valid) {
        const { msg } = await doUpdatePassword(this.form);
        this.$baseMessage(msg, "success");
        this.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.v-card {
  .v-card-title {
    font-size: 1.25rem;
    font-weight: 500;
  }
  
  .v-card-text {
    padding-top: 16px;
  }
}
</style> 